<script setup lang="ts">
import type { PropagandaInfoRespVO } from '@/api/propaganda-info';
import dayjs from 'dayjs';
import { nanoid } from 'nanoid';
import { getCurrentInstance, nextTick, ref, shallowRef } from 'vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useDictStore } from '@/store/dictStore';
import { buildAssetSource } from '@/utils';
import { formatDuration } from '@/utils/date.utils';
import { withQueryString } from '@/utils/router.utils';

const props = defineProps<{
  data: PropagandaInfoRespVO
}>();

const videoCtx = shallowRef<UniNamespace.VideoContext>();
const isPlaying = ref(false);
const $videoId = nanoid();

const instance = getCurrentInstance().proxy;

function handlePlay() {
  isPlaying.value = true;
  nextTick(() => {
    videoCtx.value = uni.createVideoContext($videoId, instance);
    videoCtx.value.play();
  });
}

function onPreviewDetail() {
  uni.navigateTo({
    url: withQueryString('/pages/healthEducation/detail', {
      id: props.data.id
    })
  });
}

const { getDictLabel } = useDictStore();

function formatContent(content: string) {
  // 最多展示两行
  // 替换html 标签
  return content.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').slice(0, 60);
}
</script>

<template>
  <view class="post-block__card" @click="onPreviewDetail">
    <!-- 卡片内容 -->
    <view class="post-block__cover" @click.stop>
      <template v-if="!isPlaying">
        <view class="post-cover__mask flex-center">
          <view class="post-cover__play-icon">
            <image :src="buildAssetSource('play.png')" class="h-full w-full" @click.stop="handlePlay" />
          </view>
        </view>
        <image :src="data.coverFileUrl" class="h-full w-full" mode="aspectFit" />
      </template>
      <video v-else :id="$videoId" :src="data.fileUrl" class="h-full w-full" object-fit="cover" :show-fullscreen-btn="false" />
    </view>
    <!-- 标签, 发布时间 -->
    <view class="mt-30 flex items-center justify-between px-30">
      <view class="post-card__category">
        {{ getDictLabel(data.materialClass, DictKeyEnum.TERMINAL_PROPAGANDA_CLASS) }}
      </view>
      <view class="post-card__time">
        {{ dayjs(data.uploadTime).format('YYYY-MM-DD') }}
      </view>
    </view>
    <!-- title -->
    <view class="post-card__info mx-30 mt-30 pb-20">
      <view class="post-card__title">
        {{ data.contentTitle }}
      </view>
      <view class="post-card__content line-clamp-2 mt-30">
        {{ formatContent(data.content) }}
      </view>
    </view>
    <!-- 阅读数量, 阅读花费时长 -->
    <view class="mt-50 flex items-center justify-between px-30 pb-40">
      <view class="post-card__read-num">
        <i class="iconfont icon-a-lujing4" />{{ data.hits }}
      </view>
      <view class="post-card__read-time">
        <i class="iconfont icon-a-lujing5" />{{ formatDuration(data.duration) }}
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.post-block__card {
  border-radius: 20px;
  overflow: hidden;
  background: #f5f9ff;

  .post-block__cover {
    height: 584px;
    width: 100%;
    position: relative;

    .post-cover__mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.55);
      z-index: 1;

      .post-cover__play-icon {
        width: 148px;
        height: 148px;
      }
    }
  }

  .post-card__category {
    background: #dfecff;
    color: var(--primary);
    font-size: 32px;
    padding: 8px 32px;
    border-radius: 100px;
  }

  .post-card__time {
    font-size: 28px;
    color: var(--secondary-text-color);
  }

  .post-card__info {
    border-bottom: 1px solid #c6dafa;
  }

  .post-card__title {
    color: var(--text-color);
    font-size: 42px;
    font-weight: bold;
  }

  .post-card__content {
    font-size: 32px;
    color: #3d3d3d;
  }

  .post-card__read-num,
  .post-card__read-time {
    font-size: 28px;
    color: #686869;
    .iconfont {
      font-size: 28px;
      margin-right: 6px;
    }
  }
}
</style>
